<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
		*{
		            padding: 0;
		            margin: 0;
		            box-sizing: border-box;}
		body{
		            background-image: url(img/首页大背景.jpg);
		}
		#top{
		    width: 100%;
		    height: 300px;
		    background-image: url("img/头背景.png");
			background-size: cover;
			background-position: center;
			}
		#top>h1{
		    font-size: 100px;
		    letter-spacing: 1em;
		    font-family: "隶书";
		    color: black;
		    height: 110px;
		    margin-left: 400px;
		    display: block;
		    position: relative;
		    top: 20px;
			text-align: center;
		}
		#top>h3{
		    font-size: 70px;
		    font-family: "隶书";
		    letter-spacing: 0.001em;
		    color:black;
		    margin-left: 400px;
		    display: block;
		    position: relative;
		    top: 40px;
			text-align: center;
		}
		
		#luzhi{
		            width: 80%;
		            height: 600px;
		            background-image: url(img/图1.jpg); 
		            /* background-color: #000b00; */
		            text-align: center;
		           padding-top: 50px;
		            margin-left: 10%;
		}
		#daohang{
		    
		    background-color: forestgreen;
		    width:100%;
		    height: 50px;
		    display: flex;
		    position: relative;
		    /* top: 15px; */
		    text-align: center;
		    z-index: 999;
		}
		#daohang>.button>span{
		    font-size: 25px;
		    font-family: "黑体";
		    text-align: center;
		    letter-spacing: 0.1em;
		    /* margin-left: 60px; */
		    z-index: 999;
		    height: 60px;
		    width: 130px;
		    display: block;
		    color: antiquewhite;
		    /* top: 10px; */
		    padding-top: 10px;
		    position: relative;
		}
		#daohang>.button{
		    margin-left: 100px;
		    position: relative;
		    left: 200px;
			
		}
		#daohang>.button>span>a{
		    text-decoration: none;
		    color: antiquewhite;
		    text-align: justify;
		}
		#daohang>li{
		    list-style: none;
		    font-size: 25px;
		    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		}
		#daohang>.button:hover{
		    background-color:  rgb(85, 170, 127);
		    width: 130px;
		   
		    cursor: pointer;
		}
		#daohang>.button li:hover{
		    color: antiquewhite;
		    background-color:  rgb(186, 239, 203);
		}
		#daohang>.button li>a:hover{
		    color: antiquewhite;
		}
		#daohang>.button ul li{
		   
		    /* height: 800px; */
		    /* transition: .2s; */
		    opacity: 0;
		    /* transform: translateY(-200px); */
		    background-color: rgba(241, 220, 192, 0.664);
		    cursor: pointer;
		    border-bottom: 1px solid antiquewhite;
		    position: relative;
		    top: -10px;
		    font-size: 25px;
		    font-family: "黑体";
		    text-align: center;
		}
		#daohang>.button>ul>li>a{
		    text-decoration: none;
		    color: rgb(4, 3, 0);
		}
		#daohang>.button:hover li{
		    height: 50px;
		    opacity: 1;
		    transform: translateY(0);
		    cursor: pointer;
		}
		 
		#body2{
		    background-image: url(img/图1.jpg); 
		    width: 80%;
		    margin-left: 10%;
		}
		#body2>h2{
		    padding-top: 10px;
		    text-align: justify;
		    width: 80%;
		    margin-left: 10%;
		    font-family: "黑体";
		    letter-spacing: 0.1em;
		    line-height: 30px;
		    text-decoration: underline;
		    text-decoration-color:rgb(86, 34, 20);
		    text-decoration-style: double;
		}
		#body2>img{
		    float: right;
		    padding-right: 150px;
			
		}
		#body2>p{
		    width: 80%;
		    margin-left: 10%;
		    text-indent: 2em;
		    letter-spacing: 0.1em;
		    line-height: 30px;
		}
		/* 轮播 */
		        *{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		header{
			width: 90%;
			height: 90%;
			overflow: hidden;
		    margin-left: 10%;
		    margin-top: 30px;
		}
		.menu-contain{
			width: 90%;
			height: 90%;
			list-style: none;
			display: flex;
		}
		
		.menu-contain > li{
			width: 10%;
			height: 400px;
			display: flex;
			transition: all 1s;
		}
		.menu-contain > li:nth-child(1){ background-color: lightyellow; }
		.menu-contain > li:nth-child(2){ background-color: rgb(170, 255, 255) }
		.menu-contain > li:nth-child(3){ background-color: pink; }
		.menu-contain > li:nth-child(4){ background-color: rgb(219, 255, 185); }
		.menu-contain > li:nth-child(5){ background-color: rgb(243, 236, 178); }
		
		.menu-contain > li.active{
			width: 80%;
			transition: all 1s;
		}
		
		.menu-contain > li.active > .left-box > .title{
			width: auto;
		}
		
		.left-box, .right-box{
			flex: 1;
		}
		.right-box > img{
			width: 300px;
		    height: 300px;
		    margin-top: 80px;
		}
		
		.left-box{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.left-box > .title{
			width: 1em;
			font-size: 2em;
			font-weight: bold;
		}
		.left-box > .desc{
			width: 80%;
			margin: 3em 0;
			font-size: 0.9em;
			text-align: center;
		}
		.left-box > button{
			width: 10em;
			height: 3em;
			border-radius: 2em;
			border: none;
			outline: none;
			cursor: pointer;
		}
		
		
		/* 定义各自独特样式 */
		.chi > .title,
		.chi > .desc{
			color: #55aaff;
		}
		.chi > button{
			background-color: #81f3ff;
			color: #ddd;
			transition: all 0.5s;
		}
		.chi > button>a{
		    text-decoration: none;
		}
		.chi > button:hover{
			background-color: #99f7ff;
			color: #fff;
			transition: all 0.5s;
		}
		
		
		.xing > .title,
		.xing > .desc{
			color: #f1b307fa;
		}
		
		.xing > button{
			background-color: #e3bc6fa5;
			color: #fff;
			transition: all 0.5s;
		}
		
		.xing > button:hover{
			background-color: #f8e61df9;
			color: #fff;
			transition: all 0.5s;
		}
		
		.tao > .title,
		.tao > .desc{
			color: #fafefe;
		}
		
		.tao > button{
			background-color: lightpink;
			color: #ddd;
			transition: all 0.5s;
		}
		.tai > button:hover{
			background-color: #ffd9ff;
			color: #fff;
			transition: all 0.5s;
		}
		
		.ya > .title,
		.ya > .desc{
			color: #4fcfbc;
		}
		
		.ya > button{
			background-color: #aaff7f;
			color: #ddd;
			transition: all 0.5s;
		}
		.ya > button:hover{
			background-color: #a2f077;
			color: #fff;
			transition: all 0.5s;
		}
		
		.shan > .title,
		.shan > .desc{
			color: #e5a227;
		}
		
		.shan > button{
			background-color: #e8e8ae90;
			color: #ddd;
			transition: all 0.5s;
		}
		.shan > button:hover{
			background-color: #d3d39e;
			color: #fff;
			transition: all 0.5s;
		}
		#dibu{
		    background-color: forestgreen;
		    width: 100%;
		    height: 150px;
		}
		#dibu>p{
			
		    text-align: center;
		    font-size: 20px;
		    font-family: "黑体";
		}
		    </style>
	</head>
	<body>
		<div id="top">
		    <h1>农苑的春夏秋冬</h1>
		    <h3>The Four Seasons of University Life</h3>
		    
		</div>
		
		    <ul id="daohang">
		    <li class="button">
		        <span><a href="首页.html">
					首页
		        </a></span>
		    </li>
		    <li class="button">
		            <span>
							春天
		            </span>
		    		<ul  type="none" class="la"  onmouseleave="cls(0)">
		    		    <li><a href="教学楼.html">教学楼</a></li>
		    		    <li><a href="凉亭.html">凉亭</a ></li>
		    		    <li><a href="校园小径.html">校园小径</a></li>
						<li><a href="花.html">春花</a></li>
		    		</ul>
		        </li>
		    <li class="button">
		        <span class="dao" onmouseover="disp(0)"><a href="夏.html">夏天</a></span>
		    </li>
		    <li class="button">
		        <span class="dao" onmouseover="disp(1)"><a href="秋.html">秋天</a></span>
		    </li>
		    <li class="button">
		        <span class="dao" onmouseover="disp(2)"><a href="冬.html">冬天</a></span>
		    </li>
		    </ul>
		<div>
		        
		    <div id="luzhi">
		        <video src="春天视频.mp4" controls="controls" height="100%" width="80%" style="object-fit: cover;"></video>
		    </div>
		        <div id="body2">
					<h2>春景之美</h2>
					            <p>春日农苑，繁花簇簇绽满枝头。微风轻拂，送来花朵芬芳，每一寸土地都洋溢着蓬勃生机，似是大自然绘就的绚丽开篇。农苑的春日，宛如大自然这位神奇魔术师精心编织的绮梦。暖阳倾洒，给大地披上一层璀璨金缕衣。繁花似锦，像一群活泼的精灵，簇拥在枝头，肆意舞动。粉的娇嫩，似少女羞涩的红晕；白的纯净，如皑皑初雪。微风轻拂，似一双温柔的手，撩动着花枝，送来阵阵甜香，那是春天独有的芬芳密码。每一寸土地都被生机填满，小草从沉睡中苏醒，顶开头顶的泥土，探出嫩绿的脑袋，好奇地张望着这个崭新的世界。河流解冻，潺潺流水唱着欢快的歌，奔向远方，仿佛在诉说着春天的故事。</p >
					            <h2>农苑春日艺术之景</h2>
					            <p>在艺术的天地里，农苑的春天是无尽的灵感源泉。绘画中，画家们用细腻的笔触勾勒春天的轮廓。对于风景画，“远景”如同春日清晨的薄雾，简洁朦胧，给人以遐想空间，似是大自然轻轻蒙上的一层神秘面纱；“中景”则像春日花园里的繁花，稍作渲染，展现出丰富的层次与色彩，是画面的精彩篇章；“近景”恰似春日里触手可及的花朵，细节繁复，色彩浓烈，每一片花瓣、每一根叶脉都被精心描绘，是对春天生命力的极致展现。</p >
					            <h2>农苑各角落的春色表现</h2>
					            <img src="img/春图.jpg" width="450px" height="380px"/>
					            <p>吉林农业科技学院的春天，总是来得迟疑而矜持。三月的风还带着松花江的凛冽，四月的雨才渐渐洗去残冬的锈色。这里的春，不是江南那般"千里莺啼绿映红"的喧闹，而是北国特有的"草色遥看近却无"的含蓄。当南方的校园早已姹紫嫣红时，这里的枝头才刚冒出一点新绿，却也因此更显珍贵。</p >
					            <p>实验田是最先感知春意的地方。农学院的师生们早早褪去厚重的棉衣，弯腰在刚刚解冻的黑土地上忙碌。他们的手指插入泥土的姿势，比操作精密仪器时还要专注。小麦苗像列队的士兵，整齐地从地缝里钻出，远看如给田野铺了一层薄薄的绿绒毯。偶尔有麻雀飞来，在田埂上跳跃，偏着头打量这些与土地对话的人，似乎也在好奇这北国之春的秘密。田边的沟渠里，残冰消融成水，映着蓝天，成了最早的一汪春水。</p >
								<p>教学楼前的连翘开得最为热烈。这些在冬日里枯瘦如柴的枝条，仿佛一夜之间就缀满了金黄的小喇叭，吹响了春天的号角。它们不似南方的花朵那般娇柔，反倒有种北国特有的豪迈，即使遭遇倒春寒也依然挺立。常有学生在花下驻足，或是拍照，或是静静观赏，而花朵只管自顾自地开着，并不理会人类的赞美。这金黄与教学楼的灰白相映成趣，构成校园里最鲜明的春之对比色。</p >
								<p>图书馆后的杏花则含蓄得多。粉白的花瓣像是怕惊扰了读书人，总是悄悄地开，又悄悄地落。石阶上常常铺着一层薄薄的花瓣，有学生推窗时，便见落英簌簌，竟比书页翻动的声音还要轻柔。偶尔一阵风过，花瓣如雪纷飞，落在学生的肩头、发梢，又悄悄滑落，不留痕迹。这般景致，倒应了那句"云想衣裳花想容"，只是多了几分北地特有的清冷气质。</p >
								<p>校园的池塘是春的镜子。垂柳最先感知水温的变化，光秃的枝条上冒出草绿的嫩芽，左三片右三片，像排列整齐的小哨兵。池水渐渐清澈，倒映着柳枝的摇曳，偶尔有鱼儿跃出水面，搅碎一池春影。岸边的铜钱草也开始蔓延，圆圆的叶片浮在水面，与柳影相映成趣。常有学生坐在池边的石凳上晨读，书声与春风一起，在水面荡起微微涟漪。</p >
								<p>操场上的春色最为生动。枯黄的草皮下，新绿悄然萌发，东一丛西一簇，像是大地的绿色针脚。随着气温回升，这些嫩芽渐渐连成一片，在阳光下泛着油亮的光泽。体育课上，学生们在跑道上奔跑，脚步声与欢笑声惊醒了泥土中蛰伏的虫蚁。偶尔有风筝飞上蓝天，在春风中摇曳，成为连接大地与天空的春之信使。</p >
								<p>食堂门口的柳树是校园春天的温度计。当柳枝变得柔软，芽苞鼓胀时，食堂的窗口也开始供应新鲜的春菜。学生们端着餐盘匆匆走过，柳枝轻拂过他们的肩头，仿佛在提醒：北国的春天虽然迟到，却从不会缺席。饭菜的香气与泥土的气息混合，构成了独特的校园春味。</p >
								<p>实验楼前的花坛是园艺专业的活教材。这里的花草不只为观赏，更是学生们的研究对象。报春花最先绽放，接着是三色堇、郁金香，每一种花的开放时间都被详细记录。花坛里的春色，既是美景，也是学问，折射出这所农业院校特有的春之韵味。</p >
								<p>校园小径两旁的丁香最懂春的心思。它们不急于绽放，直到四月底五月初，才突然爆发出满树紫白，香气浓郁得能醉人。这香气随着春风飘散，浸透了整个校园，连最严肃的教授路过时，也会不自觉地放慢脚步，深深吸一口这春天的气息。</p >
		                        <p>吉林农业科技学院的春天，就是这样不急不躁，自有章法。它没有江南春日的烟雨朦胧，也没有岭南春色的热烈奔放，却有着北国特有的坚韧与持久。这里的每一株草、每一棵树，都要经历漫长的等待，才能在短暂的春夏之交绽放生命的光彩。而这种等待与坚持，恰如农业科研的精神——在寂寞中坚守，在等待中积累，终将迎来硕果累累的秋天。</p >
		            			<p>当春风终于吹绿了校园的每一个角落，当实验田里的幼苗挺直了腰杆，当图书馆后的杏花落尽结出青果，这里的师生们知道，他们又与春天完成了一次默契的对话。这对话里，有大自然的规律，有人类的智慧，更有农业科技学院特有的，对土地与生命的理解与尊重。</p >
		                        <h2>种类</h2>
		            <header>
		                <ul class="menu-contain">
		                    <li>
		                        <div class="left-box xing">
		                            <div class="title">杏花</div>
		                            <div class="desc">
										春日游，杏花吹满头
		                             </div>
		                            <button type="button"></button>
		                        </div>
		                        <div class="right-box">
		                            <img src="img/c1f9ef5ece98040258fc2d706c774dd.jpg">
		                        </div>
		                    </li>
		                    <li class="active">
		                        <div class="left-box chi">
		                            <div class="title">池塘</div>
		                            <div class="desc">
		                                一面池塘水面平，淡磨明镜照檐楹
		                            </div>
		                            <button type="button"></button>
		                        </div>
		                        <div class="right-box">
		                            <img src="img/5.jpg" >
		                        </div>
		                    </li>
		                    <li>
		                        <div class="left-box tao">
		                            <div class="title">桃花</div>
		                            <div class="desc">
		                               雾裹烟封一万株，烘楼照壁红模糊
		                            </div>
		                            <button type="button"></button>
		                        </div>
		                        <div class="right-box">
		                            <img src="img/6.png" >
		                        </div>
		                    </li>
		                    
		                    <li>
		                        <div class="left-box ya">
		                            <div class="title">嫩芽</div>
		                            <div class="desc">
		                               诗家清景在新春，绿柳才黄半未匀
		                            </div>
		                            <button type="button"></button>
		                        </div>
		                        <div class="right-box">
		                            <img src="img/2.jpg" >
		                        </div>
		                    </li>
		    
		                    <li>
		                        <div class="left-box shan">
		                            <div class="title">假山</div>
		                            <div class="desc">
		                               假山泉涌琼花舞，玲珑飞瀑垂天幕
		                            </div>
		                            <button type="button"></button>
		                        </div>
		                        <div class="right-box">
		                            <img src="img/4.jpg" >
		                        </div>
		                    </li>
		                </ul>
		            </header>
		        </div>
		   <div id="dibu">
		       <p>关注吉林农业科技学院官网</p>
		       <p>百年农苑|育德培才传雅韵</p>
		       <p>&copy;版权所有:我说啥都队</p>
		       <p>邮箱：a15101078262@icloud.com ⭐</p>
		   </div>
		        <script type="text/javascript">
		            const menuItems = document.querySelectorAll(".menu-contain>li");
		            menuItems.forEach((val, idx) => {
		                val.onclick = function() {
		                    for (let i = 0; i < menuItems.length; i++) {
		                        if (i != idx) {
		                            menuItems[i].classList.remove("active");
		                            const child = menuItems[i].children[0]; 
		                            menuItems[i].children[1].style.display = child.children[1].style.display = child.children[2].style.display = "none";
		                        }
		                    }
		                    val.classList.add("active");
		                    const child = val.children[0];
		                    val.children[1].style.display = child.children[1].style.display = child.children[2].style.display = "block";
		                }
		                if (!(val.classList.contains("active"))) {
		                    const child = val.children[0];  //child === <div class="left-box kekeluo">
		                    val.children[1].style.display = child.children[1].style.display = child.children[2].style.display = "none";
		                }
		            })
		
		            var nav = document.querySelector('daohang');
		var lis = daohang.children;
		console.log(lis)
		for (var i = 0;i < lis.length;i++){
		    lis[i].onmouseover = function () {
		        this.children[1].style.display = 'block';
		    }
		    lis[i].onmouseout = function(){
		        this.children[1].style.display = 'none';
		    }
		}
		        </script>
	</body>
	<script>
	            var stop, staticx;
				var img = new Image();
				img.src = "";
	 
				function Sakura(x, y, s, r, fn) {
					this.x = x;
					this.y = y;
					this.s = s;
					this.r = r;
					this.fn = fn;
				}
	 
				Sakura.prototype.draw = function(cxt) {
					cxt.save();
					var xc = 40 * this.s / 4;
					cxt.translate(this.x, this.y);
					cxt.rotate(this.r);
					cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
					cxt.restore();
				}
	 
				Sakura.prototype.update = function() {
					this.x = this.fn.x(this.x, this.y);
					this.y = this.fn.y(this.y, this.y);
					this.r = this.fn.r(this.r);
					if(this.x > window.innerWidth ||
						this.x < 0 ||
						this.y > window.innerHeight ||
						this.y < 0
					) {
						this.r = getRandom('fnr');
						if(Math.random() > 0.4) {
							this.x = getRandom('x');
							this.y = 0;
							this.s = getRandom('s');
							this.r = getRandom('r');
						} else {
							this.x = window.innerWidth;
							this.y = getRandom('y');
							this.s = getRandom('s');
							this.r = getRandom('r');
						}
					}
				}
	 
				SakuraList = function() {
					this.list = [];
				}
				SakuraList.prototype.push = function(sakura) {
					this.list.push(sakura);
				}
				SakuraList.prototype.update = function() {
					for(var i = 0, len = this.list.length; i < len; i++) {
						this.list[i].update();
					}
				}
				SakuraList.prototype.draw = function(cxt) {
					for(var i = 0, len = this.list.length; i < len; i++) {
						this.list[i].draw(cxt);
					}
				}
				SakuraList.prototype.get = function(i) {
					return this.list[i];
				}
				SakuraList.prototype.size = function() {
					return this.list.length;
				}
	 
				function getRandom(option) {
					var ret, random;
					switch(option) {
						case 'x':
							ret = Math.random() * window.innerWidth;
							break;
						case 'y':
							ret = Math.random() * window.innerHeight;
							break;
						case 's':
							ret = Math.random();
							break;
						case 'r':
							ret = Math.random() * 6;
							break;
						case 'fnx':
							random = -0.5 + Math.random() * 1;
							ret = function(x, y) {
								return x + 0.5 * random - 1.7;
							};
							break;
						case 'fny':
							random = 1.5 + Math.random() * 0.7
							ret = function(x, y) {
								return y + random;
							};
							break;
						case 'fnr':
							random = Math.random() * 0.03;
							ret = function(r) {
								return r + random;
							};
							break;
					}
					return ret;
				}
	 
				function startSakura() {
	 
					requestAnimationFrame = window.requestAnimationFrame ||
						window.mozRequestAnimationFrame ||
						window.webkitRequestAnimationFrame ||
						window.msRequestAnimationFrame ||
						window.oRequestAnimationFrame;
					var canvas = document.createElement('canvas'),
						cxt;
					staticx = true;
					canvas.height = window.innerHeight;
					canvas.width = window.innerWidth;
					canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
					canvas.setAttribute('id', 'canvas_sakura');
					document.getElementsByTagName('body')[0].appendChild(canvas);
					cxt = canvas.getContext('2d');
					var sakuraList = new SakuraList();
					for(var i = 0; i < 50; i++) {
						var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
						randomX = getRandom('x');
						randomY = getRandom('y');
						randomR = getRandom('r');
						randomS = getRandom('s');
						randomFnx = getRandom('fnx');
						randomFny = getRandom('fny');
						randomFnR = getRandom('fnr');
						sakura = new Sakura(randomX, randomY, randomS, randomR, {
							x: randomFnx,
							y: randomFny,
							r: randomFnR
						});
						sakura.draw(cxt);
						sakuraList.push(sakura);
					}
					stop = requestAnimationFrame(function() {
						cxt.clearRect(0, 0, canvas.width, canvas.height);
						sakuraList.update();
						sakuraList.draw(cxt);
						stop = requestAnimationFrame(arguments.callee);
					})
				}
	 
				window.onresize = function() {
					var canvasSnow = document.getElementById('canvas_snow');
					canvasSnow.width = window.innerWidth;
					canvasSnow.height = window.innerHeight;
				}
	 
				img.onload = function() {
					startSakura();
				}
	 
				function stopp() {
					if(staticx) {
						var child = document.getElementById("canvas_sakura");
						child.parentNode.removeChild(child);
						window.cancelAnimationFrame(stop);
						staticx = false;
					} else {
						startSakura();
					}
				}
	</script>
</html>
